// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
import { Form, Carousel } from 'antd'
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import { QueryCondition } from 'widget/Grid/Grid'
import styles from './indexStyle.less'

const imgList = [
    {
        src: 'assets/img/detail/1.jpg',
        key: 1
    },
    {
        src: 'assets/img/detail/2.jpg',
        key: 2
    },
    {
        src: 'assets/img/detail/3.jpg',
        key: 3
    },
    {
        src: 'assets/img/detail/4.jpg',
        key: 4
    },
    {
        src: 'assets/img/detail/5.jpg',
        key: 5
    },
]

function SampleNextArrow(props) {
    console.log(props)
    const { className, style, onClick } = props;
    return (
      <div
        className={className}
        style={{ ...style, display: "block", background: "red" }}
        onClick={onClick}>
            123
        </div>
        
    );
  }
  function SamplePrevArrow(props) {
    const { className, style, onClick } = props;
    return (
      <div
        className={className}
        style={{ ...style, display: "block", background: "green" }}
        onClick={onClick}>
            1334
        </div>
    );
  }
class Detail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            imgList:props.imgList,    //图片列表
            preview: "",  //当前预览图片
            Setting: {
                dots: false,
                slidesToShow: 3,
                arrows: true,
                accessibility: true,
                slidesToScroll: 2,
                nextArrow: <SampleNextArrow/>,
                prevArrow: <SamplePrevArrow/>
            }
        }
    }
    nextArrow = (props) => {
        console.log(props)
        // const { className, style, onClick } = props;
        
        return (
            <div
                style={{ display: "block", background: "red" }}

            />
        );
    }
    componentDidMount() {
        this.setState({
            preview: this.state.imgList[0].src
        })
    }
    render() {
        const { imgList, preview, Setting } = this.state;
        return (
            <div className={`proDetail mainPage`}>
                <div className="productShow">
                    <div className="bigImg">
                        <img src={preview} alt="大图" />
                    </div>
                    <div className="smallImg">

                        <Carousel afterChange={this.onChange} {...Setting}>
                            {
                                imgList && imgList.map((item, idx) => {
                                    return <div key={"img_" + idx} className="smallImgItem"><img src={item.src} /> </div>
                                })
                            }
                        </Carousel>
                    </div>
                </div>
            </div>
        )
    }
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Detail)